<template>
  <div class="main-app">
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height: 36px;">
        <el-form-item label="工单编号" style="font-weight: unset;">
          <el-input v-model="formInline.user" type="seatch" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option v-for="itme in changeAll" :key="itme.statusId" :value="itme.statusName" :label="itme.statusName" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="loading" class="result">
      <div class="buttonoper">
        <el-button type="warning" class="btton1">+新建</el-button>
        <el-button class="button11">工单配置</el-button>
      </div>
      <template>
        <el-table

          :data="newGoodlist"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="taskCode"
            label="工单编号"
            width="160"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="innerCode"
            label="设备编号"
            width="160"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="taskType.typeName"
            label="工单类型"
            width="160"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="taskStatusTypeEntity.statusName"
            label="工单方式"
            width="160"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="taskStatusTypeEntity.statusName"
            label="工单状态"
            width="165"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="userName"
            label="运营人员"
            width="155"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="updateTime"
            label="创建日期"
            width="210"
            align="center"
            header-align="center"
          />
          <el-table-column
            width="160"
            label="操作"
            align="center"
            header-align="center"
          >
            <!-- <el-button type="primary">查看详情</el-button> -->
            <a style="color: #5f84ff;">查看详情</a>
          </el-table-column>
        </el-table>
      </template>
      <div class="bottter">
        <div class="left11">
          <div>共 <span> {{ stateend.totalCount }} </span>条数据 第 <span>{{ stateend.pageIndex }}</span> / <span>{{ stateend.totalPage }}</span> 页  </div>
        </div>
        <div class="right22">
          <el-button class="right22button" :disabled="+stateend.pageIndex <= 1" @click="[$emit('change',0),loading = true]">上一页</el-button>
          <el-button class="right22button" :disabled="+stateend.pageIndex >= +stateend.totalPage" @click="[$emit('change',1),loading = true]">下一页</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
// import list from './list.vue'
export default {
  name: 'Mainindex',
  // components: { list },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      navbar: ['序号', '工单编号', '设备编号', '工单类型', '工单方式', '工单状态', '运营人员', '创建日期', '操作'],
      loading: false
    }
  },
  computed: {
    newGoodlist() {
      return this.$store.getters.gooelists
    },
    stateend() {
      return this.$store.getters.goodsate
    },
    changeAll() {
      return this.$store.getters.changeAll
    }

  },
  watch: {
    stateend() {
      this.loading = false
    }
  },
  methods: {
    onSubmit() {
      this.$emit('isssiow')
    }

  }
}
</script>

<style lang="scss">
  .bottter{
    margin-top: 40px;
    display: flex;
    justify-content:space-between;
    .left11{
      font-size: 16px;
      color: #999;
    }
    .right22button{
      height: 30px;
      padding: 0;
     padding-left: 10px;
     padding-right: 10px;
    }
  }
.buttonoper{
    margin-bottom: 6px;
}
.el-table__header-wrapper{
        th{
           padding: 5px 0;
           background-color: rgb(243, 246, 251) !important;
    }
}

.btton1{
    display: flex;
    display: inline-block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
}
.button11{
    display: flex;
    display: inline-block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
}
.el-form-item__label{
    font-weight: 400 !important;
    color: unset !important;
}
</style>
<style scoped lang="scss">
.main-app{

    overflow: hidden;
    margin: 20px;
    .search{
        display: flex;
        overflow: hidden;
    height: 64px;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
    }
    .result{
        height: 673px;
        padding:20px;
        background-color: #fff;
    }
}

</style>
